<template>
  <view class="home-module">
    <view class="header">
      <view class="left">
        <u-avatar v-if="userInfo.id" size="25" :src="userInfo.avatar" />
        <view class="tip">Hi，来跟小青打个招呼吧!</view>
      </view>
      <view v-if="userInfo.id" class="right">
        <text class="level">{{ userInfo.level_code }}</text>
        <text class="nick-name">{{ userInfo.level_name }}</text>
      </view>
    </view>
    <view v-if="moduleList1.length || moduleList2.length" class="main">
      <view class="row row1">
        <view v-for="item in moduleList1" :key="item.id" class="module bg-module" @click="onModuleClick(item)">
          <u-image
            :src="item.imageUrl"
            mode="heightFix"
            :lazy-load="true"
            width="40"
            height="40"
            class="module-icon"
          />
          <text class="title" :style="{color: item.color}">{{ item.title }}</text>
          <text v-if="item.text1" class="desc">{{ item.text1 }}</text>
        </view>
      </view>

      <view class="row row2">
        <view v-for="item in moduleList2" :key="item.id" class="module bg-module" @click="onModuleClick(item)">
          <u-image :src="item.imageUrl" mode="heightFix" :lazy-load="true" width="40" height="40" />
          <text class="title" :style="{color: item.color}">{{ item.title }}</text>
          <text v-if="item.text1" class="desc">{{ item.text1 }}</text>
        </view>
      </view>
    </view>

    <u-popup :show="popupShow" mode="center" :round="10" :safe-area-inset-bottom="false" @close="popupShow = false">
      <view class="popup-content">
        <view class="title">青丝几何 发量小官</view>
        <u-image :src="barcodeImg" width="200" height="200" />
        <view class="desc">长安二维码添加你的发量守护官</view>
      </view>
    </u-popup>
  </view>
</template>

<script>
import {
  mapState
} from 'vuex'
import {
  getImg,
  getCurrentPageConfigByName,
  execFn
} from '../../../utils/index'
import barcodeTestImg from '@/static/images/barcode-test.png'
export default {
  name: 'Module',
  data() {
    return {
      accountAvatar: '',
      moduleList1: [],
      moduleList2: [],
      popupShow: false,
      barcodeImg: barcodeTestImg
    }
  },
  computed: {
    ...mapState(['userInfo'])
  },
  mounted() {
    this.initPage()
  },

  methods: {
    initPage() {
      const _this = this
      getCurrentPageConfigByName('功能模块宫格').then(res => {
        console.log('功能模块宫格--配置数据')
        console.log(res)
        const {
          app_path_set_dt
        } = res
        const list = app_path_set_dt.map(e => {
          e.imageUrl = getImg(e.image)
          return e
        })

        console.log('list')
        console.log(list)
        _this.moduleList1 = list.filter(e => e.sno <= 2)
        _this.moduleList2 = list.filter(e => e.sno > 2)
      })
    },

    /**
			 * 功能模块触发
			 * @param {Object} idx
			 */
    onModuleClick(data) {
      const {
        url
      } = data
      if (url) {
        if (url == 'qyQrcodePopup') {
          this.popupShow = true
          return
        }
		if (url == 'zwcx') {
			wx.scanCode({
			  onlyFromCamera: true,
			  scanType: ['qrCode'],
			  success (res) {
			    wx.navigateTo({
					url: `/pages/webView?src=zwcx&result=${res.result}`
				})
			  }
			})
		}
        execFn(url)
      }
    }
  }
}
</script>

<style lang="scss" scoped>
	.home-module {
		width: 95%;
		margin: 0 auto 40rpx;

		.header {
			width: 710rpx;
			height: 76rpx;
			line-height: 76rpx;
			padding: 0 20rpx;
			background-color: #000;
			border-radius: 20rpx 20rpx 0 0;
			color: $theme-color;
			font-size: 20rpx;
			@include flex-between;

			.left {
				@include flex-column-center;
				gap: 20rpx;
			}

			.right {
				.level {
					padding-right: 10rpx;
				}
			}
		}

		.main {
			padding: 20rpx;
			background-color: #FFF;
			border-radius: 0 0 20rpx 20rpx;

			.row {
				@include flex-around;
				align-items: flex-start;

				.module {
					@include flex-center;
					gap: 8rpx;
					flex-flow: column;
					justify-content: flex-start;
				}

				.desc {
					color: rgba(0,0,0,0.5);
					font-size: 20rpx;
				}
			}

			.row1 {
				.title {
					font-weight: bolder;
					font-size: 32rpx;
				}
			}

			.row2 {
				padding-top: 40rpx;

				.title {
					font-size: 25rpx;
				}
			}
		}
	}

	.popup-content {
		width: 80vw;
		height: 40vh;
		padding: 0 20rpx;
		@include flex-center;
		flex-flow: column;

		.title {
			font-size: 32rpx;
			padding-bottom: 40rpx;
		}

		.desc {
			font-size: 32rpx;
			padding-top: 30rpx;
		}
	}
</style>
